Scrollable dropdown div that ends at bottom of screen

Ask Time：2018-11-26T19:26:52 Author：Alessandro

In the following example, the div has the pre-defined height of: 300px. The last city of the scrollable dropdown is Zimbawe and does not get displayed on an iPhone 6 screen for example.

I want to change the scrollable dropdown div in such a way to not specify the height and make the div end where the screen ends.

Any ideas ?

The library we use fro the dropdown is: https://github.com/mukeshsoni/react-telephone-input

An you can see here the default height of the dropdown non dynamic: https://github.com/mukeshsoni/react-telephone-input/blob/master/src/ReactTelephoneInput.js#L477

Author:Alessandro，eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/53480118/scrollable-dropdown-div-that-ends-at-bottom-of-screen

javimovi :

Try this:\n\nCSS\n\ndiv { // change selector\n height: auto;\n}\n",

2018-11-26T11:31:33

Roko C. Buljan :

On mobile, such dropdown should appear as full overlay. Exactly like the select element options would appear on mobile. \n\nTarget mobile devices using @media and use position: fixed; with the respective positions and size (explore vh and vw units). Than use overflow-y: auto; to make your modal list scrollable.",

2018-11-26T12:16:55

this.girish :

try this out, setting height depending upon the viewport(vh).\n\n.div {\n height: 100vh;\n overflow: auto;\n}\n\n\n{height: 100vh;} matches the height of the viewport.",

2018-11-26T11:38:33

Scrollable dropdown div that ends at bottom of screen